<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue-ajax-mybatisplus</title>
		<!--vue-->
		<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
		<!--axios-->
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!--element-->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
	</head>
	<body>
		<!-- 页面渲染 -->
		<div id="app">
			<div>
				<!-- 启用 flex 布局，通过给justify属性设置值为center值为来定义子元素的排版方式 -->
				<!-- 添加用户区域 -->
				<el-row :gutter="20" type="flex" justify="center">
					<el-col :span="3">
						<div>
							<el-input v-model="adduser.name" placeholder="请输入名字"></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-input v-model="adduser.age" placeholder="请输入年龄" type="number"></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<template>
								<el-select v-model="adduser.sex" placeholder="请选择性别">
									<el-option v-for="item in sexoptions" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</template>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-button type="primary" icon="el-icon-circle-plus" @click="insertuserbtn()">添加用户
							</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
			<div>
				<!-- 启用 flex 布局，通过给justify属性设置值为center值为来定义子元素的排版方式 -->
				<!-- 添加用户区域 -->
				<el-row :gutter="20" type="flex" justify="center">
					<el-col :span="3">
						<div>
							<el-input v-model="updateuser.id" disabled></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-input v-model="updateuser.name" placeholder="请输入名字"></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-input v-model="updateuser.age" placeholder="请输入年龄" type="number"></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-input v-model="updateuser.sex" placeholder="请输入性别"></el-input>
						</div>
					</el-col>
					<el-col :span="3">
						<div>
							<el-button type="primary" icon="el-icon-circle-plus" @click="updateuserbtn()">保存信息
							</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 数据展示区 -->
			<div align="center">
				<template>
					<div>
						<el-table :data="user" style="width: 55%" @row-click="getDetails">
							<el-table-column prop="id" label="ID编号" width="180">
							</el-table-column>
							<el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="age" label="年龄" width="180">
							</el-table-column>
							<el-table-column prop="sex" label="性别" width="180">
							</el-table-column>
							<!-- 编辑和删除按钮组件,text类型 -->
							<el-table-column fixed="right" label="操作" width="100">
								<template slot-scope="scope">
									<el-button type="text" size="middle" @click="editbtn(scope.row)">编辑</el-button>
									<el-button type="text" size="middle" @click="deletebtn(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
			</div>
		</div>

		<script>
			axios.defaults.baseURL = "http://localhost:8081"
			const app = new Vue({
				el: "#app",
				data: {
					user: [

					],
					adduser: {
						name: '',
						age: '',
						sex: ''
					},
					sexoptions: [{
						value: '男',
						label: '男'
					}, {
						value: '女',
						label: '女'
					}],
					updateuser: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					// 查询所有数据
					findall() {
						axios.get("findall")
							.then(Promise => {
								this.user = Promise.data
							})
					},
					// 插入数据
					insertuserbtn() {
						axios.post("insertuser", this.adduser)
							.then(Promise => {
								let msg = Promise.data
								alert(msg)
								this.findall()
								this.adduser = {}
							})
					},
					//删除数据
					deletebtn(rows) {
						axios.delete("deleteuser", {
								params: {
									id: rows
								}
							})
							.then(Promise => {
								let msg = Promise.data
								alert(msg)
								this.findall()
							})
					},
					//编辑数据
					editbtn(ud) {
						this.updateuser = ud
					},
					//修改数据
					updateuserbtn() {
						axios.put("updateuser", this.updateuser)
							.then(Promise => {
								let msg = Promise.data
								alert(msg)
								this.findall()
								this.updateuser = {}
							})
					}
				},
				created() {
					this.findall()
				}
			})
		</script>
	</body>
</html>
